<template>
	<view class="next-bubble-menu">
		<view @click.stop="showContainer">
			<slot></slot>
		</view>
		<view
			class="container"
			v-show="show && showUi"
		>
			<view
				class="block"
				:style="{ top: top + 'rpx' }"
			>
				<view
					class="arrow"
					:style="{
						left: 0,
						top: showTop && arrowTop + 12 + 'rpx'
					}"
				></view>
				<view
					class="arrow-tip"
					:style="{
						width: width + 'rpx',
						left: 0,
						borderRadius: radius + 'rpx',
						top: showTop && arrowTop + 'rpx'
					}"
				></view>
				<view
					class="list-container"
					:style="
						'height:' +
						(dHeight ? dHeight + 'rpx' : 'auto') +
						';max-height:' +
						dMaxHeight +
						'rpx;border-radius:' +
						radius +
						'rpx;width:' +
						width +
						'rpx;left:' +
						relativeAllow +
						'rpx;'
					"
				>
					<view
						class="list-item"
						v-for="(item, index) in dataList"
						:key="index"
						@click.stop="clickItem(item)"
					>
						<image
							class="list-item-image"
							:src="item.iconSrc"
							v-if="item.iconSrc"
						/>
						<text class="list-item-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bingEleId: {
				type: String,
				default: ""
			},
			//气泡框数据源
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			hasBar: {
				type: Boolean,
				default: true
			},
			radius: {
				type: Number,
				default: 8
			},
			dWidth: {
				type: Number,
				default: 0
			},
			dHeight: {
				type: Number,
				default: 0
			},
			dMaxHeight: {
				type: Number,
				default: 400
			},
			relativeAllow: {
				type: Number,
				default: -30
			}
		},
		data() {
			return {
				show: false,
				width: 0,
				height: 0,
				left: 0,
				top: 0,
				bottom: 0,
				rectTop: 0,
				screenWidth: 0,
				showTop: false,
				arrowTop: 0,
				showUi: false
			}
		},
		mounted() {
			this.$nextTick(() => {
				if (!this.bingEleId) return
				// #ifdef APP-PLUS
				uni.createSelectorQuery()
					.in(this)
					.select(".next-bubble-menu")
					.boundingClientRect((res) => {
						let difference = res.left
						uni.createSelectorQuery()
							.select("#" + this.bingEleId)
							.boundingClientRect((rect) => {
								const systemInfo = uni.getSystemInfoSync()
								const windowHeight = systemInfo.windowHeight
								this.screenWidth = systemInfo.screenWidth
								if (!this.dWidth) {
									this.width = this.px2rpx(rect.width, this.screenWidth)
								} else {
									let screenW = this.px2rpx(this.screenWidth, this.screenWidth)
									this.width = this.dWidth > screenW ? screenW : this.dWidth
								}
								this.height = rect.height
								this.rectTop = rect.top
								this.bottom = windowHeight - rect.bottom
							})
							.exec()
					})
					.exec()
				// #endif
				// #ifndef APP-PLUS
				uni.createSelectorQuery()
					.in(this)
					.select(".next-bubble-menu")
					.boundingClientRect((res) => {
						let difference = res.left
						uni.createSelectorQuery()
							.select("#" + this.bingEleId)
							.boundingClientRect((rect) => {
								const systemInfo = uni.getSystemInfoSync()
								const windowHeight = systemInfo.windowHeight
								this.screenWidth = systemInfo.screenWidth
								if (!this.dWidth) {
									this.width = this.px2rpx(rect.width, this.screenWidth)
								} else {
									let screenW = this.px2rpx(this.screenWidth, this.screenWidth)
									this.width = this.dWidth > screenW ? screenW : this.dWidth
								}
								this.height = rect.height
								this.rectTop = rect.top
								this.bottom = windowHeight - rect.bottom
							})
							.exec()
					})
					.exec()
				// #endif
			})
		},
		methods: {
			showContainer() {
				if (!this.bingEleId) return
				else this.show = !this.show
				if (this.show) {
					this.$nextTick((res) => {
						// #ifdef APP-PLUS
						let view = uni.createSelectorQuery().in(this).select(".list-container")
						view.boundingClientRect((res) => {
							let arrHeight = res.height
							let height = this.bottom - arrHeight - 15
							if (height < 0) {
								this.showTop = true
								this.top = this.px2rpx(this.rectTop - arrHeight - 10, this.screenWidth)
								this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth)
							} else {
								this.showTop = false
								this.top = this.px2rpx(this.rectTop + this.height + 10, this.screenWidth)
							}
							this.$nextTick(() => {
								this.showUi = true
							})
						}).exec()
						// #endif
						// #ifndef APP-PLUS
						uni.createSelectorQuery()
							.in(this)
							.select(".list-container")
							.boundingClientRect((res) => {
								const left = res.left
								let arrHeight = res.height
								let height = this.bottom - arrHeight - 15
								if (height < 0) {
									this.showTop = true
									if (this.hasBar) {
										// #ifdef H5
										this.top = this.px2rpx(this.rectTop - arrHeight + 35, this.screenWidth)
										// #endif
										// #ifndef H5
										this.top = this.px2rpx(this.rectTop - arrHeight - 10, this.screenWidth)
										// #endif
									} else {
										this.top = this.px2rpx(this.rectTop - arrHeight - 10, this.screenWidth)
									}
									this.arrowTop = this.px2rpx(arrHeight - 5, this.screenWidth)
								} else {
									this.showTop = false
									if (this.hasBar) {
										// #ifdef H5
										this.top = this.px2rpx(this.rectTop + this.height + 54, this.screenWidth)
										// #endif
										// #ifndef H5
										this.top = this.px2rpx(this.rectTop + this.height + 10, this.screenWidth)
										// #endif
									} else {
										this.top = this.px2rpx(this.rectTop + this.height + 10, this.screenWidth)
									}
								}
								this.$nextTick(() => {
									this.showUi = true
								})
							})
							.exec()
						// #endif
					})
				}
			},
			px2rpx(px, screenWidth) {
				return px / (screenWidth / 750)
			},
			//点击选项
			clickItem(item) {
				this.show = false
				this.$emit("change", item)
			}
		}
	}
</script>

<style scoped>
	.next-bubble-menu {
		position: relative;
		/* border: solid transparent 1px; */
		z-index: 999;
	}

	.block {
		position: fixed;
	}
	.list-container {
		position: absolute;
		box-sizing: border-box;
		z-index: 99999999 !important;
		overflow: auto;
		padding: 16rpx 20rpx;
		background-color: #ffffff;
		box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	.arrow {
		position: absolute;
		z-index: 999999999 !important;
		width: 0;
		height: 0;
		margin-top: -40rpx;
		border-top: 20rpx solid transparent;
		border-bottom: 20rpx solid #ffffff;
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
	}

	.arrow-tip {
		position: absolute;
		z-index: 999999999 !important;
		height: 15rpx;
	}

	.list-item {
		line-height: 52rpx;
		color: #333;
		text-align: center;
	}
	/* .list-item:after {
		content: " ";
		display: block;
		height: 1rpx;
		transform: scaleY(0.5);
		background-color: rgba(0, 0, 0, 0.1);
	} */
	.list-item .list-item-image {
		display: inline-block;
		vertical-align: middle;
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.list-item .list-item-text {
		vertical-align: middle;
		font-size: 20rpx;
	}
</style>